<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <!--el-form inline 设置为行内表单-->
    <el-form :inline="true" :model="attrForm">
      <el-form-item label="一级分类">
        <el-select v-model="attrForm.c1Id"  @change="c1Handler">
          <!-- 拖拽的插件:拖拽插件的使用 -->
          <draggable
            v-model="c1Arr"
            group="people"
            @start="drag = true"
            @end="drag = false"
          >
            <el-option
              :label="c1.name"
              :value="c1.id"
              v-for="(c1, index) in c1Arr"
              :key="c1.id"
            ></el-option>
          </draggable>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="attrForm.c2Id"  @change="c2Handler">
          <el-option
            :label="c2.name"
            :value="c2.id"
            v-for="(c2, index) in c2Arr"
            :key="c2.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="attrForm.c3Id" @change="c3Handler">
          <el-option
            :label="c3.name"
            :value="c3.id"
            v-for="(c3, index) in c3Arr"
            :key="c3.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
//拖拽插件:第一步
import draggable from "vuedraggable";

export default {
  name: "Category",
  //接受props
  props:['fetchCategoryId'],
  data() {
    return {
      city: "",
      //存储一级分类的数据(数组)
      c1Arr: [],
      //存储二级分类的数据(数组)
      c2Arr: [],
      //存储三级级分类的数据(数组)
      c3Arr: [],
      attrForm: {
        c1Id: "",
        c2Id: "",
        c3Id: "",
      },
    };
  },
  //组件挂载完毕,获取一级分类的数据
  mounted() {
    this.getC1List();
  },
  methods: {
    async getC1List() {
      //获取一级分类的数据,不需要任何参数
      let result = await this.$http.attr.reqC1();
      if (result.code == 200) {
        this.c1Arr = result.data;
      }
    },
    //一级分类select的回调
    async c1Handler() {
      //调用父亲的方法,将一级ID传递给父亲
      this.fetchCategoryId(this.attrForm.c1Id,1);
      //清空上一次二级分类ID、三级分类ID
      this.attrForm.c2Id = "";
      this.attrForm.c3Id = "";
      this.c2Arr = [];
      this.c3Arr = [];
      //整理参数
      const { c1Id } = this.attrForm;
      //获取二级分类的数据
      let result = await this.$http.attr.reqC2(c1Id);
      if (result.code == 200) {
        this.c2Arr = result.data;
      }
    },
    //二级分类select的回调
    async c2Handler() {
      this.fetchCategoryId(this.attrForm.c2Id,2);
      this.attrForm.c3Id = "";
      this.c3Arr = [];
      //整理参数
      const { c2Id } = this.attrForm;
      //发请求获取三级分类的数据
      let result = await this.$http.attr.reqC3(c2Id);
      if (result.code == 200) {
        this.c3Arr = result.data;
      }
    },
    //三级分类select的回调
    c3Handler(){
      //调用父亲的方法,给父组件传递相应的分类
      this.fetchCategoryId(this.attrForm.c3Id,3);
    }
  },
  components: {
    //第二步
    draggable,
  },

};
</script>

<style scoped>
</style>
